<!-- Vue SFC -->
<template>
  <div>
    <!-- 标题栏 -->
    <NavBar :title="$route.meta.title"> </NavBar>
    <van-form @submit="onSubmit">
      <VanFieldVueTreeSelect
        name="treevalue"
        label="树控件"
        v-model="treevalue"
        :columns="options"
        :option="option"
      />
      <VanFieldVueTreeSelect
        name="treevalue2"
        label="多选树控件"
        v-model="treevalue2"
        :multiple="true"
        :columns="options"
        :option="option"
      />
      <VanFieldCheckbox
        name="checkboxvalue"
        label="多选控件"
        v-model="checkboxvalue"
        :columns="options"
        :option="option"
      />
      <VanFieldSelectPicker
        name="pickervalue"
        label="选择控件"
        v-model="pickervalue"
        :columns="options2"
        :option="option"
      />
      <VanFieldDateTimePicker
        name="timevalue"
        label="时间控件"
        v-model="timevalue"
        type="time"
      />
      <VanFieldDateTimePicker
        name="datevalue"
        label="日期控件"
        v-model="datevalue"
        type="date"
      />
      <VanFieldDateTimePicker
        name="datetimevalue"
        label="时间日期控件"
        v-model="datetimevalue"
        type="datetime"
      />
      <VanFieldCalendar
        name="calendarvalue"
        label="日历控件"
        v-model="calendarvalue"
      />
      <VanFieldArea name="areavalue" label="地区控件" v-model="areavalue" />
      <van-field name="radiovalue" label="选项控件">
        <template #input>
          <van-radio-group v-model="radiovalue" direction="horizontal">
            <van-radio :name="false" shape="square">否</van-radio>
            <van-radio :name="true" shape="square">是</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
// import the component
import NavBar from "@/components/NavBar";
import VanFieldVueTreeSelect from "@/components/VanField/VanFieldVueTreeSelect";
import VanFieldSelectPicker from "@/components/VanField/VanFieldSelectPicker";
import VanFieldCheckbox from "@/components/VanField/VanFieldCheckbox";
import VanFieldDateTimePicker from "@/components/VanField/VanFieldDateTimePicker";
import VanFieldCalendar from "@/components/VanField/VanFieldCalendar";
import VanFieldArea from "@/components/VanField/VanFieldArea/index";
export default {
  // register the component
  components: {
    NavBar,
    VanFieldVueTreeSelect,
    VanFieldSelectPicker,
    VanFieldCheckbox,
    VanFieldDateTimePicker,
    VanFieldCalendar,
    VanFieldArea
  },
  data() {
    return {
      // define the default value
      treevalue: "a",
      treevalue2: ["a", "b"],
      checkboxvalue: null,
      pickervalue: null,
      radiovalue: false,
      timevalue: "",
      datevalue: "",
      datetimevalue: "",
      calendarvalue: "",
      areavalue: "",
      // define options
      options: [
        {
          id: "a",
          label: "a1",
          children: [
            {
              id: "aa",
              label: "aa"
            },
            {
              id: "ab",
              label: "ab"
            }
          ]
        },
        {
          id: "b",
          label: "b1"
        },
        {
          id: "c",
          label: "c1"
        }
      ],
      options2: [
        {
          id: "a",
          label: "a"
        },
        {
          id: "b",
          label: "b"
        },
        {
          id: "c",
          label: "c"
        }
      ],
      option: {
        label: "label",
        value: "id"
      }
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    }
  }
};
</script>
